<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>管理员页面</title>
  <script src="js/vue.js"></script>
  <script src="./js/axios.js"></script>

  <!-- mobile responsive meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="Admin Page for Article Review">
  
  <!-- plugins -->
  <link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css">
  <link rel="stylesheet" href="plugins/themify-icons/themify-icons.css">
  
  <!-- Main Stylesheet -->
  <link rel="stylesheet" href="css/style.css" media="screen">

  <!-- Favicon -->
  <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
  <link rel="icon" href="images/favicon.png" type="image/x-icon">
</head>
<body>

<!-- navigation -->
<header class="navigation ">
  <div class="container" id="index">
    <nav class="navbar navbar-expand-lg navbar-white">
      <a class="navbar-brand order-1" href="admin.html">
        <img class="img-fluid" width="50px" src="images/图标.png" alt="管理后台">
      </a>
      <div class="collapse navbar-collapse text-center order-lg-2 order-3" id="navigation">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item">
            <a class="nav-link" href="admin.html">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="admin-check.html">审核文章</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="forbid.html">禁言用户</a>
          </li>
        </ul>
      </div>
      <div class="order-2 order-lg-3 d-flex align-items-center">
      <ul class="navbar-nav ml-auto 1ogined"  v-if="userid!=null">
        <li class="nav-item @@login__active">
          <span><a class="nav-link">{{userid}}</a></span>
        </li>
          <li class="nav-item @@register__active">
              <span v-on:click.prevent="logout"><a class="nav-link" href="Login.html">注销</a></span>
          </li>
      </ul>
      </div>
    </nav>
  </div>
</header>
<script>
  new Vue({
    el: "#index",
    data: {
      userid: localStorage["userid"],
      searchId: '' // 用于存储搜索的ID
    },
    methods: {
      logout: function() {
        localStorage.clear();
        this.userid = null;
        location.href = "Login.html";
      },
    }
  })
</script>
<!-- /navigation -->
<section class="section-ad">
  <div class="container" id="posttimelist">
    <h2 class="h3 section-title">所有文章</h2>
    <div class="row">
      <div class="col-md-12">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>文章标题</th>
              <th>作者</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in paginatedList" :key="index">
              <td><a @click="getRowId(item.id)">{{item.title}}</a></td>
              <td>{{item.userId}}</td>
            </tr>
            
          </tbody>
          
        </table>
        <!-- 分页导航 -->
        <nav aria-label="Page navigation" class="mt-4">
          <ul class="pagination justify-content-center">
            <li class="page-item" :class="{ disabled: currentPage === 1 }">
              <a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)">
                上
              </a>
            </li>
            <li class="page-item" v-for="page in totalPages" :key="page" 
                :class="{ active: page === currentPage }">
              <a class="page-link" href="#" @click.prevent="changePage(page)">
                {{ page }}
              </a>
            </li>
            <li class="page-item" :class="{ disabled: currentPage === totalPages }">
              <a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)">
                下
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</section>
<script>
  var vm = new Vue({
      el: "#posttimelist",
      data: {
          userid: localStorage["userid"],
          postid: "",
          selecttopictype: "",
          selectposttype: "",
          list: new Array(),
          currentPage: 1,
          itemsPerPage: 6,
      },// 添加mounted生命周期钩子
      mounted() {
        this.getpost();  // 页面加载完成后自动执行getpost
      },
      computed: {
        // 计算总页数
        totalPages() {
          return Math.ceil(this.list.length / this.itemsPerPage)
        },
        // 当前页显示的文章列表
        paginatedList() {
          const start = (this.currentPage - 1) * this.itemsPerPage
          const end = start + this.itemsPerPage
          return this.list.slice(start, end)
        }
      },
      methods: {
        
          logout: function () {
              localStorage.clear();
              this.userid = null;
          },
          // 切换页码
          changePage(page) {
            if (page >= 1 && page <= this.totalPages) {
              this.currentPage = page
              // Scroll to the specific section
              const section = document.getElementById('posttimelist');
              if (section) {
                section.scrollIntoView({ behavior: 'smooth' });
              }
            }
          },
          getpost: function () {
              var postInfo = {
                  id: "",
                  time: "",
                  userId: "",
                  text: "",
                  title: "",
                  likeNum: "",
                  commentNum:"",
                  isVisible: "",
                  topicType: "",
                  postType: "",
                  weight: ""
              }; 
              var userId = this.userid == "" ? -1 : this.userid;
              axios.get("https://localhost:7071/api/Post?id=-1&userId=-1&topicType=N%2FA&postType=N%2FA"
                  ).then((res) => 
                  {
                      res.data.sort((a, b) => new Date(b.time) - new Date(a.time));
                      for (d in res.data) {
                          postInfo.id = res.data[d].id;
                          postInfo.time = res.data[d].time;
                          postInfo.userId = res.data[d].userId;
                          // postInfo.text = res.data[d].text;
                          postInfo.text = res.data[d].text;
                          postInfo.title = res.data[d].title;
                          postInfo.likeNum = res.data[d].likeNum;
                          postInfo.commentNum = res.data[d].commentNum;
                          postInfo.isVisible = res.data[d].isVisible;
                          postInfo.topicType = res.data[d].topicType;
                          postInfo.postType = res.data[d].postType;
                          postInfo.weight = res.data[d].weight;
                          localStorage["postInfo"+res.data[d].id] = JSON.stringify(postInfo);
                          this.list.push(res.data[d]);
                          console.log(postInfo.likeNum);
                      }
                      console.log(this.list);
                  })
          },
          storetag:function(topicType){
            localStorage.setItem("selectedTag", topicType);
            location.href = "tags.html";
          },
          getRowId:function(id){
                    localStorage["num"]=id;
                    var commentInfo = {
                        id:"",
                        ownerId:"",
                        text:"",
                        time:"",
                        postId:""
                    }
                    var postId = id;
                    var number=0;
                    axios.get("https://localhost:7071/api/Comment?id=-1"+
                    "&ownerId=-1"+
                    "&postId="+postId
                    ).then((res) =>
                    {
                        console.log(res.data);
                        for(d in res.data){
                            number++;
                            commentInfo.id = res.data[d].id;
                            commentInfo.ownerId = res.data[d].ownerId;
                            commentInfo.text = res.data[d].text;
                            commentInfo.time = res.data[d].time;
                            commentInfo.postId = res.data[d].postId;
                            localStorage["commentInfo"+number] = JSON.stringify(commentInfo);
                            
                        }
                        localStorage["commentnum"] = number;
                        location.href = "check-details.html";
                    })
                }
      }
  })
</script>
<footer class="footer">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-5 text-center text-md-left mb-4">
        <ul class="list-inline footer-list mb-0">
          <li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
        </ul>
      </div>
      <div class="col-md-2 text-center mb-4">
        <a href="index.html"><img class="img-fluid" width="100px" src="images/图标.png" alt="管理后台"></a>
      </div>
    </div>
  </div>
</footer>

<!-- JS Plugins -->
<script src="plugins/jQuery/jquery.min.js"></script>
<script src="plugins/bootstrap/bootstrap.js"></script>
</body>
</html>
